﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See full license in root of repo. -->

<!--
    This file shows how to display a dialog in the task pane.
    -->


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Welcome Screen - Embedded Dialog</title>

    <!-- jQuery is used to change various items in the UI. -->
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.1.min.js"></script>

    <!-- We use Office.js in the JavaScript file. -->
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>

    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css">

    <!-- Template styles -->
    
    <link href="embedded.dialog.css" rel="stylesheet" type="text/css" />

    <!-- Embed the JavaScript file to manipulate the UI. -->
    <script src="embedded.dialog.js"></script>
   

</head>
<body class="ms-font-l ms-embedded-dialog">
    
    <!-- This DIV contains the content for the dialog. The dialog is hidden initially. -->
    <div id="showEmbeddedDialog" class="ms-embedded-dialog__options" >

       
        <div class="ms-Dialog ms-Dialog--close">
            <div class="ms-Overlay js-DialogAction--close"></div>
            <div class="ms-Dialog-main">
                <button class="ms-Dialog-button ms-Dialog-button--close js-DialogAction--close" id="buttonClose"> <i class="ms-Icon ms-Icon--x"></i> </button>
                <div class="ms-Dialog-header">
                    <p class="ms-Dialog-title">Dialog Title</p>
                </div>
                <div class="ms-Dialog-inner">
                    <div class="ms-Dialog-content">
                        <p class="ms-font-xs ms-embedded-dialog__content__text">Dialog text should be clear and concise.</p>
                    </div>
                    <div class="ms-embedded-dialog__actioncenter">
                        
                            <button  class="ms-Dialog-action ms-Button ms-Button--primary ms-embedded-dialog__button-center" id="buttonOk">
                                <span class="ms-Button-label">OK</span>
                            </button>
                            <button class="ms-Dialog-action ms-Button ms-embedded-dialog__button-center" id="buttonCancel" >
                                <span class="ms-Button-label">Cancel</span>
                            </button>
                        
                    </div>
                </div>
            </div>
        </div>

    </div>
    <main class="ms-embedded-dialog__main">
        <section class="ms-embedded-dialog__header ms-bgColor-themeLighter">
            <div class="ms-embedded-dialog__header--center ms-font-m ms-fontWeight-light">
                <p>
                    <i class="ms-Icon ms-Icon--plus ms-fontColor-themePrimary"></i>
                    Item 1
                </p><p>
                    <i class="ms-Icon ms-Icon--plus ms-fontColor-themePrimary"></i>
                    Item 2
                </p>
                
            </div>
            <div class="ms-embedded-dialog__header--right ms-font-m ms-fontWeight-light">
                <i class="ms-Icon ms-Icon--reactivate ms-fontColor-themePrimary"></i>
            </div>
        </section>

        <section class="ms-embedded-dialog__content ms-font-m ms-fontColor-neutralPrimary">
            <section class="ms-embedded-dialog__content">
                <div class="ms-font-xl ms-embedded-dialog__content__title">Title</div>
                <div class="ms-font-l ms-fontWeight-light ms-embedded-dialog__content__subtitle">Subtitle</div>
                <div class="ms-font-m ms-embedded-dialog__content__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                <button id="buttonCommand" class="ms-Button ms-Button--primary">
                    <span class="ms-Button-icon">
                        <i class="ms-Icon ms-Icon--plus"></i>
                    </span>
                    <span class="ms-Button-label">Perform action</span>
                    <span class="ms-Button-description">Description of the action this button performs</span>
                </button>
            </section>
        </section>

    </main>
    <footer class="ms-embedded-dialog__footer  ms-bgColor-themePrimary">
        <div class="ms-embedded-dialog__footer--left">
            <img src="/assets/logo-filled.png" />
            <h1 class="ms-font-xl ms-fontWeight-semilight ms-fontColor-white">My Add-in Name</h1>
        </div>
        <div class="ms-embedded-dialog__footer--right">
            <i class="ms-Icon ms-Icon--gear ms-fontColor-white"></i>
        </div>
    </footer>

</body>
</html>
